<div class="py-4 pb-7 pb-lg-9 py-lg-9 container order-detail">
  <div class="row d-flex flex-lg-row-reverse">
    <div class="col-12 col-lg-9">
      <nav class="d-block d-lg-none breadcrumb mb-4" aria-label="breadcrumb">
        <a class="d-flex text-decoration-none breadcrumb-item icon-wrap-md active text-black " aria-current="page" href="{{ routes.account_url }}#orders">
          {% render 'icon-chevron-left' %}
          {{ 'customer.account.back_to_orders' | t }}
        </a>
      </nav>
      <div class="p-4 card rounded-3 mb-3 mb-lg-4 account-title bg-gray-100 border-0">
        <h2 class="mb-0 lead fw-bold">{{ 'customer.order.title' | t }}</h2>
      </div>
      <div class="card rounded-3 p-4 mb-4 bg-gray-100 border-0 text-black">
        <div class="row">
          <div class="col-12 col-lg-5">
            <p class="mb-0 mb-lg-1"><span class="gray-600">{{ 'customer.order.payment_status' | t }}: </span><span>{{ order.financial_status_label }}</span></p>
          </div>
          <div class="col-12 col-lg-7">
            <p class="mb-0 mb-lg-1"><span class="gray-600">{{ 'customer.order.fulfillment_status' | t }}: </span><span>{{ order.fulfillment_status_label }}</span></p>
          </div>
          <div class="col-12 col-lg-5">
            <p class="mb-0 mb-lg-1"><span class="gray-600">{{ 'customer.order.order_number' | t }}: </span><span>{{ order.name }}</span></p>
          </div>
          <div class="col-12 col-lg-7">
            <p class="mb-0 mb-lg-1"><span class="gray-600">{{ 'customer.order.date' | t }}: </span><span>{{ order.created_at | time_tag: format: "date_at_time" }}</span></p>
          </div>
          {%- if order.cancelled -%}
            <div class="col-12">
              <p class="mb-0 mb-lg-1"><span class="gray-600">{{ 'customer.order.cancelled_on' | t }}: </span><span>{{ order.cancelled_at | time_tag: format: "date_at_time" }}</span></p>
            </div>
            <div class="col-12">
              <p class="mb-0 mb-lg-1"><span class="gray-600">{{ 'customer.order.cancelled_reason' | t }}: </span><span>{{ order.cancel_reason_label }}</span></p>
            </div>
          {%- endif -%}
          {% assign line_item = order.line_items | first %}
          {% if line_item.fulfillment.tracking_url %}
            <div class="col-12 col-lg-5">
              <a href="{{ line_item.fulfillment.tracking_url }}" target="_blank" rel="noopener nofollow" class="mb-1 link-primary text-decoration-none">{{ 'customer.order.track_shipment' | t }} {% render 'icon-open-link' %}</a>
            </div>
          {% endif %}
          {% if line_item.fulfillment.tracking_number %}
            <div class="col-12 col-lg-7">
              <p class="mb-1"><span class="gray-600">{{ 'customer.order.tracking_number' | t }}: </span><span>{{ line_item.fulfillment.tracking_number }}</span></p>
            </div>
          {% endif %}
        </div>
        <hr class="my-4">
        <div class="row gy-3 gy-lg-0">
          <div class="col-12 col-lg-5">
            <p class="mb-1 gray-600">{{ 'customer.order.shipping_address' | t }}</p>
            {{ order.shipping_address | format_address }}
          </div>
          <div class="col-12 col-lg-7">
            {% comment %}
            {%- for payment_terms in order.payment_terms -%}
              <p class="mb-1 mb-lg-2"><span class="gray-600">Payment method:</span>{{ payment_terms.name }}</p>
            {%- endfor -%}
            {% endcomment %}
            <p class="mb-1 gray-600">{{ 'customer.order.billing_address' | t }}</p>
            {{ order.billing_address | format_address }}
          </div>
        </div>
        <hr>
        <ul class="list-unstyled mb-0">
          {% for line_item in order.line_items %}
            <li class="position-relative">
              <div class="row">
                <div class="col-auto">
                  <div class="ratio ratio-1x1 item-img">
                    <img width="80" height="80"
                      loading="lazy"
                      src="{{ line_item.image | img_url: '80x' }}"
                      srcset="{{ line_item.image | img_url: '80x' }} 1x, {{ line_item.image | img_url: '160x' }} 2x, {{ line_item.image | img_url: '240x' }} 3x"
                      alt="{{ line_item.image.alt | escape }}" class="img-fluid w-100 h-100">
                  </div>
                </div>

                <div class="col">
                  <div class="d-flex justify-content-between">
                    <p class="mb-0 mw-text-3" href="{{ line_item.url }}"><span class="fw-bold break-word lead">{{ line_item.title | escape }}</span>{% unless line_item.title contains 'Default' %}<br><span class="">{{ line_item.title | escape }}</span>{% endunless %}</p>
                    <div class="d-block d-md-none fw-bold lead">
                      {%- if line_item.original_line_price != line_item.final_line_price -%}
                        <div class="d-inline-block">
                          <dt>
                            <span class="visually-hidden">{{ 'products.product.price.regular_price' | t }}</span>
                          </dt>
                          <dd>
                            <s class="gray-600">{{ line_item.original_line_price | money }}</s>
                          </dd>
                        </div>
                        <div class="d-inline-block">
                          <dt>
                            <span class="visually-hidden">{{ 'products.product.price.sale_price' | t }}</span>
                          </dt>
                          <dd>
                            <span>{{ line_item.final_line_price | money }}</span>
                          </dd>
                        </div>
                      {%- else -%}
                        {{ line_item.original_line_price | money }}
                      {%- endif -%}
                    </div>
                  </div>
                  <div class="d-flex justify-content-between">
                    {%- if line_item.original_price != line_item.final_price or line_item.unit_price_measurement -%}
                        {%- if line_item.original_price != line_item.final_price -%}
                          <div class="d-inline-block">
                            <dt>
                              <span class="visually-hidden">{{ 'products.product.price.regular_price' | t }}</span>
                            </dt>
                            <dd>
                              <s class="gray-600">{{ line_item.original_price | money }}</s>
                            </dd>
                          </div>
                          <div class="d-inline-block">
                            <dt>
                              <span class="visually-hidden">{{ 'products.product.price.sale_price' | t }}</span>
                            </dt>
                            <dd>
                              <span>{{ line_item.final_price | money }}</span>
                            </dd>
                          </div>
                        {%- else -%}
                          <div class="d-inline-block">
                            <dt>
                              <span class="visually-hidden">{{ 'products.product.price.regular_price' | t }}</span>
                            </dt>
                            <dd>
                              {{ line_item.original_price | money }}
                            </dd>
                          </div>
                        {%- endif -%}
                        {%- if line_item.unit_price_measurement -%}
                          <div class="d-inline-block">
                          <dt>
                            <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
                          </dt>
                          <dd>
                            <span>
                              {%- capture unit_price_separator -%}
                                <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
                              {%- endcapture -%}
                              {%- capture unit_price_base_unit -%}
                                {%- if line_item.unit_price_measurement.reference_value != 1 -%}
                                  {{- line_item.unit_price_measurement.reference_value -}}
                                {%- endif -%}
                                {{ line_item.unit_price_measurement.reference_unit }}
                              {%- endcapture -%}
                              <span data-unit-price>{{ line_item.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
                            </span>
                          </dd>
                          </div>
                        {%- endif -%}
                        <span class="d-inline-block d-lg-none ms-2">&times; {{ line_item.quantity }}</span>
                    {%- else -%}
                      <span>{{ line_item.final_price | money }}</span><span class="d-inline-block d-lg-none ms-2">&times; {{ line_item.quantity }}</span>
                    {%- endif -%}
                    </div>
                </div>
                <div class="col-lg-5 d-none d-lg-block">
                  <div class="d-flex align-items-center justify-content-between">
                    <div>
                      <p class="mb-0 ">&times; {{ line_item.quantity }}</p>
                    </div>
                    <div class="fw-bold">
                      {%- if line_item.original_line_price != line_item.final_line_price -%}
                        <div class="d-inline-block">
                          <dt>
                            <span class="visually-hidden">{{ 'products.product.price.regular_price' | t }}</span>
                          </dt>
                          <dd>
                            <s class="gray-600">{{ line_item.original_line_price | money }}</s>
                          </dd>
                        </div>
                        <div class="d-inline-block">
                          <dt>
                            <span class="visually-hidden">{{ 'products.product.price.sale_price' | t }}</span>
                          </dt>
                          <dd>
                            <span>{{ line_item.final_line_price | money }}</span>
                          </dd>
                        </div>
                      {%- else -%}
                        {{ line_item.original_line_price | money }}
                      {%- endif -%}
                    </div>
                  </div>
                </div>
              </div>
              <a  {% if line_item.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ line_item.url }}" class="stretched-link"></a>
            </li>
          <hr class="my-4">
        {% endfor %}
        </ul>
        <div class="row">
          <div class="col-12 col-lg-5 ms-auto me-0">
            <div class="d-flex justify-content-between mb-1">
              <div class="gray-700">{{ 'customer.order.subtotal' | t }}:&nbsp;</div>
              <div>{{ order.line_items_subtotal_price | money }}</div>
            </div>
            {%- if order.cart_level_discount_applications != blank -%}
              {%- for discount_application in order.cart_level_discount_applications -%}
                <div class="d-flex justify-content-between mb-1">
                  <div class="gray-700">{{ 'customer.order.discount' | t }}&nbsp;({{- discount_application.title -}}):&nbsp;</div>
                  <div>-{{ discount_application.total_allocated_amount | money }}</div>
                </div>
              {%- endfor -%}
            {%- endif -%}
            {%- for shipping_method in order.shipping_methods -%}
              <div class="d-flex justify-content-between mb-1">
                <div class="gray-700">{{ 'customer.order.shipping' | t }} ({{ shipping_method.title }}):&nbsp;</div>
                <div>{{ shipping_method.price | money }}</div>
              </div>
            {%- endfor -%}
            {%- for tax_line in order.tax_lines -%}
              <div class="d-flex justify-content-between mb-1">
                <div class="gray-700">{{ 'customer.order.tax' | t }} ({{ tax_line.title }} {{ tax_line.rate | times: 100 }}%):&nbsp;</div>
                <div>{{ tax_line.price | money }}</div>
              </div>
            {%- endfor -%}
            <div class="d-flex justify-content-between fs-6">
              <div class="fw-bold">{{ 'customer.order.total' | t }}:&nbsp;</div>
              <div class="fw-bold">{{ order.total_price | money_with_currency }}</div>
            </div>
            {% if order.financial_status == 'refunded' or order.financial_status == 'partially_refunded' %}
            <div class="d-flex justify-content-between mt-2">
              <div class="gray-700">{{ 'customer.order.refund_amount' | t }}:&nbsp;</div>
              <div>{{ order.total_refunded_amount | money }}</div>
            </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
    <div id="sidebar" class="col-12 col-lg-3 d-none d-lg-block">
      {% render 'account-sidebar' %}
    </div>
  </div>
</div>
